<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
  import * as echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from './mixins/resize'
  import {getProList} from "@/api/sl/rwork";


  const animationDuration = 6000

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '350px'
      }
    },
    data() {
      return {
        chart: null,
      }
    },
    // watch: {
    //   chartData: {
    //     deep: true,
    //     handler(val) {
    //       console.log(val)
    //       this.setOptions(val)
    //     }
    //   }
    // },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      // initChart() {
      //   this.chart = echarts.init(this.$el, 'macarons')
      //   this.setOptions(this.chartData)
      // },
      // setOptions({ expectedData} = {}) {
      //   console.log(expectedData)
      //   if(expectedData==null||expectedData==undefined){
      //     return;
      //   }
      //   this.chart.setOption({
      //     legend: {},
      //     tooltip: {},
      //     dataset: {
      //       source: [expectedData.arrYear, expectedData.xm, expectedData.sf, expectedData.sc]
      //     },
      //     xAxis: {
      //       type: 'category'
      //     },
      //     yAxis: {},
      //     series: [{
      //       type: 'bar'
      //     }, {
      //       type: 'bar'
      //     }, {
      //       type: 'bar'
      //     }]
      //   })
      // }
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        const currentDate = new Date();
        let obj = {};
        obj.date = currentDate;
        obj.strType = "module";
        getProList(obj).then(response => {
          console.log(response)
          let arrYear = ['product', (currentDate.getFullYear() - 2).toString(), (currentDate.getFullYear() - 1)
            .toString(), (currentDate.getFullYear()).toString()
          ];
          let xm = ["鞋面", 0, 0, 0];
          let sf = ["沙发", 0, 0, 0];
          let sc = ["水场", 0, 0, 0];
          response.data.forEach(item => {
            if (item.proDate == (currentDate.getFullYear() - 2)) {
              if (item.moduleId == 1) {
                xm[1] = item.production;
              } else if (item.moduleId == 2) {
                sf[1] = item.production;
              } else if (item.moduleId == 3) {
                sc[1] = item.production;
              }
            } else if (item.proDate == (currentDate.getFullYear() - 1)) {
              if (item.moduleId == 1) {
                xm[2] = item.production;
              } else if (item.moduleId == 2) {
                sf[2] = item.production;
              } else if (item.moduleId == 3) {
                sc[2] = item.production;
              }
            } else if (item.proDate == currentDate.getFullYear()) {
              if (item.moduleId == 1) {
                xm[3] = item.production;
              } else if (item.moduleId == 2) {
                sf[3] = item.production;
              } else if (item.moduleId == 3) {
                sc[3] = item.production;
              }
            }
          })
          this.chart.on('click', (params) => {
            console.log(params)
            //this.showModal()
          })
          this.chart.setOption({
            legend: {},
            tooltip: {},
            dataset: {
              source: [arrYear, xm, sf, sc]
            },
            xAxis: {
              type: 'category'
            },
            yAxis: {},
            series: [{
              type: 'bar'
            }, {
              type: 'bar'
            }, {
              type: 'bar'
            }]
          })
        });
      }
    }
  }
</script>
